import React from 'react'
import './TodoMain.css'
import Swal from 'sweetalert2';

export default function TodoMain({todos,checkTodo,delTodos,to}) {
  // console.log(todos);
  return (
    <ul className="todo-main">
      {
        todos.map(item=>{
          // console.log(item);
          return  <li key={item._id}>
          <label>
            <input type="checkbox" checked={item.done} onChange={(e)=>{
              checkTodo(item._id,e.target.checked)
            }}/>
            <span className={item.done?'done':null}>{item.title}</span>
          </label>
          <button className="btn btn-danger" onClick={()=>{
                         //添加确认框
                         Swal.fire({
                          title: '',
                          text: '你确定要删除该任务么?',
                          icon: 'warning',
                          showCancelButton: true,
                          confirmButtonText: '确定',
                          cancelButtonText: '取消'
                        }).then((result) => {
                          if (result.isConfirmed) {
                            //删除任务
                            delTodos(item._id);
                            Swal.fire(
                              '删除成功',
                              '',
                              'success'
                            )
                          } else if (result.dismiss === Swal.DismissReason.cancel) {
                            Swal.fire(
                              '取消删除',
                              '',
                              'success'
                            )
                          }
                        });
          }}>删除</button>
        </li> 
        })
      }
      {!todos.length&&<li style={{textAlign: 'center', padding: '20px 0'}}>{to?'请输入你的任务并去完成它':'恭喜你，完成了所有任务，请到主机电脑处领取奖励！'}</li>}
      </ul>
  )
}
